    var box = document.querySelector('.box')
    var ol = document.querySelector('.box ol')
    var ulis = document.querySelectorAll('.box ul li')
    var olis = document.querySelectorAll('.box ol li')
    for (let i = 0; i < ulis.length - 1; i++) {
        ulis[i].onmouseover = function () {
            for (let j = 0; j < ulis.length - 1; j++) {
                ulis[j].className = ''
                olis[j].className = ''
                ol.className = ''
            }
            getStyle(box, 'height')
            // console.dir(box);
            ulis[i].className = 'active'
            olis[i].className = 'active'
            ol.className = 'active'
        }
        box.onmouseout = function () {
            ulis[i].className = ''
            olis[i].className = ''
            ol.className = ''
        }


    }

    //请求列表分类
    var id = localStorage.getItem('id')
    var token = localStorage.getItem('token')
    console.log(id,token);
    var ul = document.querySelector('.list1_1 ul')
    var ul1 = document.querySelector('.list2_1 .ul1')
    var ul2 = document.querySelector('.list2_1 .ul2')
    var ul3 = document.querySelector('.list2_1 .ul3')
    var ul4 = document.querySelector('.list2_1 .ul4')
    var ul5 = document.querySelector('.list2_1 .ul5')
    var ul6 = document.querySelector('.list2_1 .ul6')
 
    //发送请求
   var xhr = new XMLHttpRequest;
   xhr.open('post', '/ararar')
   xhr.setRequestHeader('content-type', 'application/json;charset=UTF-8')
   xhr.send('{"channelCode":"BROS"}')
   xhr.onload = function(){
       var res = xhr.responseText;
       res = JSON.parse(res)
       
       var {code,serializableData} = res;
       //将获取的商品分类数据放到字符串中
       var str = '';
       serializableData.forEach(item=>{

           str += `
            <li class="ll">
                <a href="javascript:;">${item.firstCategoryName}</a>
            </li>
            `
       })
       ul.innerHTML = str
       console.log(serializableData[0].getAllProductLastCategoryDataList[0].productList[0].productCode);//KLS00014
       console.log(serializableData[1].getAllProductLastCategoryDataList[0].productList[0].productCode);
       console.log(serializableData);

    
       //将列表商品数据放在数组中
    //一、限时限量
       var xianliang = []
       xianliang.push(serializableData[0].getAllProductLastCategoryDataList[0].productList)
       console.log(xianliang);
    //二、面部护理
       var mianbuhuli = []
       mianbuhuli.push(serializableData[1].getAllProductLastCategoryDataList[0].productList)
       mianbuhuli.push(serializableData[1].getAllProductLastCategoryDataList[1].productList)
       mianbuhuli.push(serializableData[1].getAllProductLastCategoryDataList[2].productList)
       mianbuhuli.push(serializableData[1].getAllProductLastCategoryDataList[3].productList)
       mianbuhuli.push(serializableData[1].getAllProductLastCategoryDataList[4].productList)
       mianbuhuli.push(serializableData[1].getAllProductLastCategoryDataList[5].productList)
       mianbuhuli.push(serializableData[1].getAllProductLastCategoryDataList[6].productList)
       console.log(mianbuhuli);
    //三、臻选套装
       var zhenxuantaozhuang = []
       zhenxuantaozhuang.push(serializableData[2].getAllProductLastCategoryDataList[0].productList)
       console.log(zhenxuantaozhuang);
    //四、身体护理
       var shengtihuli = []
       shengtihuli.push(serializableData[3].getAllProductLastCategoryDataList[0].productList)
       shengtihuli.push(serializableData[3].getAllProductLastCategoryDataList[1].productList)
       shengtihuli.push(serializableData[3].getAllProductLastCategoryDataList[2].productList)
       shengtihuli.push(serializableData[3].getAllProductLastCategoryDataList[3].productList)
       shengtihuli.push(serializableData[3].getAllProductLastCategoryDataList[4].productList)
       shengtihuli.push(serializableData[3].getAllProductLastCategoryDataList[5].productList)
       console.log(shengtihuli);
    //五、男士护理
       var nanshihuli = []
       nanshihuli.push(serializableData[4].getAllProductLastCategoryDataList[0].productList)
       nanshihuli.push(serializableData[4].getAllProductLastCategoryDataList[1].productList)
       nanshihuli.push(serializableData[4].getAllProductLastCategoryDataList[2].productList)
       nanshihuli.push(serializableData[4].getAllProductLastCategoryDataList[3].productList)
       nanshihuli.push(serializableData[4].getAllProductLastCategoryDataList[4].productList)
       console.log(nanshihuli);
    //六、头发护理
       var toufahuli = []
       toufahuli.push(serializableData[3].getAllProductLastCategoryDataList[0].productList)
       toufahuli.push(serializableData[3].getAllProductLastCategoryDataList[1].productList)
       toufahuli.push(serializableData[3].getAllProductLastCategoryDataList[2].productList)
       console.log(toufahuli);
       
    // 遍历数组将数据放在空字符串中，显示在页面上 
       var str1 = ''
       xianliang[0].forEach(item=>{
           console.log(item);
        console.log(item.productCode);

        str1 += `
            <li>
            <img src="${item.productImageDefault}" width=240 height=300>   
            <p>${item.productName}</p>
            <span>￥${item.defaultPrice}元</span> <br>
            <select>
            <option selected disabled>请选择规格</option>
            <option>${item.variantCustValueList[0]}</option>
            <option>${item.variantCustValueList[1]}</option>
        </select>
            <a href="detail.html?productCode=${item.productCode}&score=${item.productScore}" class="btn btn-primary">查看详情</a>
          </li>
        `
       })
       ul1.innerHTML = str1;

       //
       var str2 = ''
    //    console.log(mianbuhuli);
       for(var i=0;i < mianbuhuli.length;i++){
           for(var j=0;j < mianbuhuli[i].length;j++){
            //    console.log(mianbuhuli[i][j].variantCustValueList[0]);
            console.log(mianbuhuli[i][j].productCode);
            str2 += `
            <li>
            <img src="${mianbuhuli[i][j].productImageDefault}" width=240 height=300>   
            <p>${mianbuhuli[i][j].productName}</p>
            <span>￥${mianbuhuli[i][j].defaultPrice}元</span> <br>
            <select>
            <option selected disabled>请选择规格</option>
            <option>${mianbuhuli[i][j].variantCustValueList[0]}</option>
            <option>500ml</option>
        </select>
            <a href="detail.html?productCode=${mianbuhuli[i][j].productCode}&score=${mianbuhuli[i][j].productScore}" class="btn btn-primary">查看详情</a>
          </li>
        `
           }
       }
       ul2.innerHTML = str2;

       //
       var str3 = ''
          zhenxuantaozhuang[0].forEach(item=>{
              console.log(item.productScore);
           str3 += `
               <li>
               <img src="${item.productImageDefault}" width=240 height=300>   
               <p>${item.productName}</p>
               <span>￥${item.defaultPrice}元</span> <br>
               <select>
               <option selected disabled>请选择规格</option>
               <option>${item.variantCustValueList[0]}</option>
               <option>单品</option>
           </select>
               <a href="detail.html?productCode=${item.productCode}&score=${item.productScore}" class="btn btn-primary">查看详情</a>
             </li>
           `
          })
          ul3.innerHTML = str3;

          //
          var str4 = ''
          for(var i=0;i < shengtihuli.length;i++){
              for(var j=0;j < shengtihuli[i].length;j++){
                //   console.log(shengtihuli[i][j].variantCustValueList[0]);
                //   console.log(shengtihuli[i][j].productImageDefault);
               str4 += `
               <li>
               <img src="${shengtihuli[i][j].productImageDefault}" width=240 height=300>   
               <p>${shengtihuli[i][j].productName}</p>
               <span>￥${shengtihuli[i][j].defaultPrice}元</span> <br>
               <select>
               <option selected disabled>请选择规格</option>
               <option>${shengtihuli[i][j].variantCustValueList[0]}</option>
               <option>500ml</option>
           </select>
               <a href="detail.html?productCode=${shengtihuli[i][j].productCode}&score=${shengtihuli[i][j].productScore}" class="btn btn-primary">查看详情</a>
             </li>
           `
              }
          }
          ul4.innerHTML = str4;

          //
          var str5 = ''
          for(var i=0;i < nanshihuli.length;i++){
              for(var j=0;j < nanshihuli[i].length;j++){
                //   console.log(nanshihuli[i][j].variantCustValueList[0]);
                //   console.log(nanshihuli[i][j].productImageDefault);
               str5 += `
               <li>
               <img src="${nanshihuli[i][j].productImageDefault}" width=240 height=300>   
               <p>${nanshihuli[i][j].productName}</p>
               <span>￥${nanshihuli[i][j].defaultPrice}元</span> <br>
               <select>
               <option selected disabled>请选择规格</option>
               <option>${nanshihuli[i][j].variantCustValueList[0]}</option>
               <option>500ml</option>
           </select>
               <a href="detail.html?productCode=${nanshihuli[i][j].productCode}&score=${nanshihuli[i][j].productScore}" class="btn btn-primary">查看详情</a>
             </li>
           `
              }
          }
          ul5.innerHTML = str5;

          //
          var str6 = ''
        //   console.log(toufahuli);
          for(var i=0;i < toufahuli.length;i++){
              for(var j=0;j < toufahuli[i].length;j++){
                //   console.log(toufahuli[i][j].variantCustValueList[0]);
                //   console.log(toufahuli[i][j].productImageDefault);
               str6 += `
               <li>
               <img src="${toufahuli[i][j].productImageDefault}" width=240 height=300>   
               <p>${toufahuli[i][j].productName}</p>
               <span>￥${toufahuli[i][j].defaultPrice}元</span> <br>
               <select>
               <option selected disabled>请选择规格</option>
               <option>${toufahuli[i][j].variantCustValueList[0]}</option>
               <option>500ml</option>
           </select>
               <a href="detail.html?productCode=${toufahuli[i][j].productCode}&score=${toufahuli[i][j].productScore}" class="btn btn-primary">查看详情</a>
             </li>
           `
              }
          }
          ul6.innerHTML = str6;
      
   }


